<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/pages/views/taglib.jsp"%>

<html>
<head>
    <title>首页展示</title>
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.min.css">
    <script src="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
    <script src="${ctxStatic}/jquery/bootstrap.min.js"></script>

    <link rel="stylesheet" href="${ctxStatic}/highlight/styles/default.css">
    <script src="${ctxStatic}/highlight/highlight.pack.js"></script>




    <script>hljs.initHighlightingOnLoad();</script>

    <script>

        $(function(){
            $("[rel=drevil1]").popover({
                trigger:'manual',
                placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
                title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> </div>', //this is the top title bar of the popover. add some basic css
                html: 'true', //needed to show html of course
                content : '<div id="popOverBox"><textarea cols="60" rows="6">xxx</textarea></div>', //this is the content of the html box. add the image here or anything you want really.
                animation: false
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });

        function inDetailedPage(fileName ,templatesType){
            var url = "${pageContext.request.contextPath}/DetailedCon?Catalog="+fileName+"&templatesType="+templatesType;
            window.open(url, "_self");
        }
    </script>
</head>
<body>

<div class="container">
    <%--<a href="#" rel="drevil1">
        <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车
    </a>--%>
    <div class="jumbotron">
        <h1>插件应用展示</h1>
        <p>show application</p>
    </div>

    <div class="row">
        <c:forEach items="${list}" var="appList" varStatus="scot" >
            <div class="col-sm-4 panel panel-primary">
                <h3 >应用编号: 【${scot.count}】</h3>
                <p style="line-height: 100px; vertical-align:middle; text-align: center; " >
                    <img src="../${appList.svgPath}" width="100px;" height="100px">
                </p>
                <p><button onclick="inDetailedPage('${appList.fileName}','${appList.templatesType}')" class="btn btn-small btn-block btn-primary" type="button">${appList.fileName}</button></p>
            </div>
        </c:forEach>
    </div>

    <br/>
    <div class="common markup all" style="display: block;">
        <%--<span class="hljs-section"># README.md</span>--%>
        <h2>README.md</h2>
        <pre><code class="markdown hljs">
        ${appReadme}
        </code>
        </pre>
    </div>

</div>
</div>

</body>
</html>
